<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        body{
            background-color: #f7f7f7;
        }
        .nav {
            width: 1000px;
            margin: 0 auto;
            height: 40px;
            line-height: 40px;
            vertical-align: middle;
        }

        .nav li {
            float: left;
            width: 100px;
            text-align: center;
        }

        .nav li:nth-child(2) {
            margin-left: 500px;
        }

        .electricappliance ul {
            width: 1000px;
            height: 700px;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            flex-wrap: wrap;
        }

        .electricappliance ul li {
            width: 230px;
            height: 300px;
            float: left;
            display: block;
            text-align: center;
            background-color: #fff;
            margin-top: 10px;
        }

        /* .electricappliance ul li {
            
        } */

        .electricappliance ul li img {
            height: 160px;
            width: 160px;
            margin: 20px auto;
            display: block;
        }


        .electricappliance {
            width: 1000px;
            height: 620px;
            margin: 0 auto;
            /* border: solid 1px red; */
            
        }
    </style>
</head>
<body>    
    <script src="./a.js"></script>
    <div class="nav"></div>
    <div class="electricappliance">
        <ul>

        </ul>
    </div>


    <script src="./a.js"></script>
    <script>
        console.log(arr);
        let nav = document.querySelector('.nav')//获取导航栏box
        let electricapplianceList = document.querySelector('.electricappliance > ul');//获取商品box的ul
        //导航栏名称创建
        let navArr = ['扫地机', '空净', '清洁', '风扇'];
        //渲染出导航栏
        nav.innerHTML = `<li>生活电器</li>`
        for (let i = 0; i < 4; i++) {
            nav.innerHTML = nav.innerHTML + `<li class='navLi'>${navArr[i]}</li>`
        }
        let navLis = document.querySelectorAll('.nav > .navLi');//获取导航栏的li
        // let navIndex = 0;//默认
        for (let i = 0; i < navLis.length; i++) {
            //遍历添加鼠标事件 鼠标移入后更改对象
            navLis[i].addEventListener('mouseover', function (e) {
                electricapplianceList.innerHTML = '';  //清空上次渲染的li
                for (let j = 0; j < 8; j++) {//重新按照点击的索引号渲染
                    let imgSrc = arr[i].data[j].url;
                    let title = arr[i].data[j].title;
                    let desc = arr[i].data[j].desc;
                    let price = arr[i].data[j].price;
                    electricapplianceList.innerHTML = electricapplianceList.innerHTML +
                        ` 
                        <li>
                            <img src="${imgSrc}">
                            <div>${title}</div>
                            <div>${desc}</div>
                            <div>${price}</div>
                        </li>`
                }
            })
        }
        // 渲染出8个li
        for (let j = 0; j < 8; j++) {
            let imgSrc = arr[0].data[j].url;
            let title = arr[0].data[j].title;
            let desc = arr[0].data[j].desc;
            let price = arr[0].data[j].price;
            electricapplianceList.innerHTML = electricapplianceList.innerHTML +
                ` 
            <li>
                <img src="${imgSrc}">
                <div>${title}</div>
                <div>${desc}</div>
                <div>${price}</div>
            </li>`
        }
    </script>
    <script>
        /* console.log(arr);
        console.log(arr[0]);
        console.log(arr[0].data);
        console.log(arr[0].data[0]);
        console.log(arr[0].data[0].title);
        var str = ""
        for(var i = 0;i< arr[0].data.length;i++){
            console.log(arr[0].data[i]);
            console.log(arr[0].data[i].title);
            var obj = arr[0].data[i];
            str += `<li>
                    <h4>${obj.title}</h4>
                </li>`
        }
        console.log(str); */
    </script>
</body>
</html>